<template>
    <view class="cell-item">
        <view class="cell-box">
            <view class="left" :style="position == 'right' ? 'justify-content: space-between;padding-right: 6px;' : ''">

                <!-- 图片区域开始 -->
                <view class="image-box" v-if="item.image_url">
                    <image :src="item.image_url"/>
                    <view class="badge" v-if="item.badge_text">{{ item.badge_text }}</view>
                </view>
                <!-- 图片区域结束 -->

                <!-- icon区域开始 -->
                <view class="icon-box" v-if="item.icon" :style="`background-color: ${item.icon_bg_color}; border: ${item.icon_border};`">
                    <i :class="'iconfont ' + item.icon" :style="`color: ${item.icon_color};font-size: ${item.icon_size};`"></i>
                    <view class="badge" v-if="item.badge_text">{{ item.badge_text }}</view>
                </view>
                <!-- icon区域结束 -->

                <!-- 标题区域开始 -->
                <view class="title-box" v-if="item.title">
                    <text class="title">{{item.title}}</text>
                    <text class="note ellipsis-1">{{item.desc}}</text>
                </view>

                <!-- 名称区域开始 -->
                <view class="title" v-if="item.name">{{item.name}}</view>

                <!-- 内容区域开始 -->
                <view class="value" v-if="item.value">{{item.value}}</view>
            </view>
            <view class="right" v-if="is_arrows"><i class="iconfont icon-youjiantou"></i></view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import type { CellItem } from '@/types/global'

withDefaults(defineProps<{
    item?: CellItem
    is_arrows?: boolean
    position?: string
}>(), {
    item: () => {
        return {
            title: 'title',
            image_url: '/static/images/default_avatar.png',
            value: 'value',
            badge_text: ''
        }
    },
    is_arrows: true,
    position: 'left',
})
</script>

<style scoped lang="scss">
.cell-item {
    padding-left: 30rpx;
    background-color: #fff;
    .cell-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18rpx 0;
        padding-right: 30rpx;
        border-top: 2rpx solid #f6f6f6;
        // 左边区域开始
        .left {
            flex: 1;
            display: flex;
            align-items: center;

            // 图片区域
            .image-box {
                width: 90rpx;
                height: 90rpx;
                border-radius: 10rpx;
                overflow: hidden;
                margin-right: 10rpx;
                border: 2rpx solid #f2f0f0;
                image {
                    width: 90rpx;
                    height: 90rpx;
                }
                .badge {
                    background-color: red;
                    position: absolute;
                    width: 32rpx;
                    height: 32rpx;
                    line-height: 32rpx;
                    border-radius: 16rpx;
                    top: 0;
                    right: 0;
                    color: #fff;
                    text-align: center;
                    font-size: 20rpx;
                }
            }

            // icon区域
            .icon-box {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 90rpx;
                height: 90rpx;
                border-radius: 10rpx;
                overflow: hidden;
                margin-right: 10rpx;
                border: 2rpx solid #f2f0f0;
                position: relative;
                .iconfont {
                    font-size: 46rpx;
                    color: #fff;
                }

                .badge {
                    background-color: red;
                    position: absolute;
                    width: 32rpx;
                    height: 32rpx;
                    line-height: 32rpx;
                    border-radius: 16rpx;
                    top: 0;
                    right: 0;
                    color: #fff;
                    text-align: center;
                    font-size: 20rpx;
                }
            }
            .title-box {
                flex: 1;
                display: flex;
                flex-direction: column;
                .title {
                    font-size: 28rpx;
                    color: #000;
                }
                .note {
                    padding-top: 8rpx;
                    font-size: 24rpx;
                    color: #9b9999;
                }
            }
            .value {
                display: flex;
                padding-left: 30rpx;
                color: #9b9999;
                font-size: 26rpx;
                justify-content: flex-end;
                line-height: 44rpx;
            }
        }
        // 左边区域结束

        // 右边区域开始
        .right {
            width: 20rpx;
            .iconfont {
                font-size: 28rpx;
                color: #9b9999;
            }
        }
        // 右边区域结束
    }
}
</style>